import React from 'react';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util,
} from 'bizcharts';
import DataSet from '@antv/data-set';

class Groupedcolumn extends React.Component {
  render() {
    const { data, fields, yMin } = this.props;

    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'fold',
      // fields: ["Jan.", "Feb.", "Mar.", "Apr.", "May.", "Jun.", "Jul.", "Aug."],
      fields: fields || ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.'],
      // 展开字段集
      key: '月份',
      // key字段
      value: '月均降雨量', // value字段
    });

    const cols = {
      月均降雨量: {
        min: yMin,
        formatter(val) {
          return `${(val * 100).toFixed(2)}%`;
        },
      },
    };

    return (
      <div>
        <Chart height={400} data={dv} scale={cols} forceFit>
          <Axis name="月份" />
          <Axis name="月均降雨量" />
          <Legend />
          <Tooltip
            crosshairs={{
              type: 'y',
            }}
          />
          <Geom
            type="interval"
            position="月份*月均降雨量"
            color={['name', ['#4e81bd', '#c1504c']]}
            adjust={[
              {
                type: 'dodge',
                marginRatio: 1 / 32,
              },
            ]}
          />
        </Chart>
      </div>
    );
  }
}

export default Groupedcolumn;
